<style lang="sass" scoped>
    .container{
        background:#F0F0F0;
    }
    .msg{
        width:750px;
        background:url('../../assets/images/bg.png') no-repeat; 
        background-size:100% 100%;
        padding-top:22px;
        .head-img{
            width:160px;
            height:160px;
            margin:0 auto;
            display:block;
            border-radius:80px;
        }
        .name{
            font-size:36px;
            color:#fff;
            text-align:center;
        }
        .top{
            width:100%;
            justify-content:space-between;
            align-items:center;
            .line{
                height:119px;
                width:1px;
                background:#ccc;
            }
            .group{
                flex:1;
                height:200px;
                border-radius:12px;
                display:flex;
                flex-direction:column;
                justify-content:center;
                align-items:center;
                .group-title{
                    font-size:26px;
                    font-weight:bold;
                    color:#787878;
                    margin-top:16px;
                }
                .text{
                    margin-top:20px;
                    font-size:28px;
                    color:#787878;
                    height:54px;
                    line-height:1;
                    font-size:30px;
                    span{
                        font-size:56px;
                    }
                }
            }
            .group:nth-child(2){
                margin:0 20px;
            }
        }
    }
    
    .title{
        border-radius:30px 30px 0 0;
        background:#fff;
        width:700px;
        margin:80px auto 0;
        font-size:36px;
        color:#505050;
        text-align:center;
        height:89px;
        line-height:89px;
    }
    .list{
        width:700px;
        border-radius:0 0 30px 30px;
        background:#fff;
        margin:0 auto 20px;
        flex-wrap:wrap;
        padding:0 30px 40px 30px;
        .group{
            width:200px;
            margin-right:18px;
            margin-bottom:20px;
            &:nth-child(3n){
                margin-right:0;
            }
            img{
                display:block;
                width:200px;
                height:200px;
            }
            .text{
                font-size:28px;
                overflow:hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                color:#505050;
                margin-top:13px;
                &.text2{
                    margin-top:5px;
                    font-size:24px;
                }
            }
        }   
    }
</style>
<template>
    <div class="container">
        <div class="msg">
            <img class="head-img" :src="userinfo.headimgurl"/>
            <div class="name">{{userinfo.nickname}}</div>
            <div class="top flex">
                <div class="group">
                    <div class="text"><span>{{info.readBookNumber}}</span>本</div>
                    <div class="group-title">阅读绘本</div>
                </div>
                <div class="line"></div>
                <div class="group">
                    <div class="text"><span>{{info.readDay}}</span>天</div>
                    <div class="group-title">阅读天数</div>
                </div>
                <div class="line"></div>
                <div class="group">
                    <div class="text"><span>{{info.totalReadMin}}</span>分钟</div>
                    <div class="group-title">阅读时长</div>
                </div>
            </div>
        </div>
        
        <div class="title">近期读书热门榜</div>
        <div class="list flex">
            <div v-for="(item,i) in list" class="group">
                <img :src="item.bookIamgeUrl" alt="">
                <div class="text">{{item.bookName}}</div>
                <div class="text text2">{{item.readNumber}}次</div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                userinfo:{},
                info:{},
                list:[]
            }
        },
        watch:{
        },
        created(){

        },
        mounted() {
            this.$nextTick(() => {
                $('body')[0].style.backgroundColor = '#ff7373';
                this.userinfo = util.getStorage('local', 'userinfo')?JSON.parse(util.getStorage('local', 'userinfo')):{};
                this.getReadDataOfUser();
                this.getBookReadDataTopListPage();
            });
        },
        methods: {
            // 查询用户阅读数据
            getReadDataOfUser(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/readData/getReadDataOfUser',
                    success:(data=>{
                        this.info = data.data;
                    })
                })
            },
            // 获取阅读绘本排行榜
            getBookReadDataTopListPage(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/readData/getBookReadDataTopListPage',
                    data:{
                        pageNum:1,//	是	Number	页码
                        pageSize:30,//	是	Number	每页多少条
                    },
                    success:(data=>{
                        this.list = data.data.list;
                    })
                })
            }
        },
        
    };
</script>